import { useEffect, useRef } from 'react';

import { dispose, init } from './world.events';

export const World = () => {
  const three_container = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (three_container.current) {
      init(three_container.current);
    }
    return () => {
      if (three_container.current) {
        dispose(three_container.current);
      }
    };
  }, []);

  return (
    <div className="absolute w-full h-full min-w-[24rem]">
      <div ref={three_container} className="w-full h-full rounded-sm overflow-hidden"></div>
    </div>
  );
};
